<template>
	<view>
		<view class="box-list">
			<view class="title">手机号</view>
			<view class="input-box flex flai">
				<input type="number" v-model="phone" class="flex1" disabled>
				<button :disabled="disabled" class="sms-btn" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">{{msg}}</button>
			</view>
		</view>
		<view class="box-list">
			<view class="title">验证码</view>
			<view class="input-box flex">
				<input type="number" placeholder="请输入验证码" v-model="code" class="flex1">

			</view>
		</view>
		<view style="height: 170rpx;"></view>
		<view class="footer-box">
			<view @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import API from '../../api/index.js'
	export default {
		data() {
			return {
				msg: '发送验证码',
				phone: '',
				code: '',
				disabled: false
			}
		},
		methods: {
			// 获取手机号
			decryptPhoneNumber(e) {
				var _this = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						console.log(res.code)
						var data = {
							code: res.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						API.common.getPHone(data).then(ret => {
							console.log(ret)
							if (ret.errno == '0') {
								_this.phone = ret.data
								console.log(_this.phone)
								_this.sendSMS()
							}
						})
					},
					fail() {
						console.log('失败')
					}
				});

			},
			submit() {
				if (this.phone=='') {
					uni.showToast({
						title: '您还没有获取手机号哟！',
						duration: 2000
					});
					return
				}
				var codeRegex=/^\d{6}$/
				if (!codeRegex.test(this.code)) {
					uni.showToast({
						title: '请输入6位短信验证码！',
						duration: 2000
					});
					return
				}
				var data = {
					phone:this.phone,
					code:this.code
				}
				API.indexHome.bindShops(data).then(res => {
					if (res.errno == '0') {
						uni.showToast({
							title: '绑定成功',
							duration: 2000
						});
						uni.login({
						  provider: 'weixin',
						  success: function (res) {
							  console.log(res.code)
							  
							  API.common.login({code:res.code,userInfo:{}}).then(ret=>{
								  console.log(ret)
								  if (ret.errno=='0') {
									  console.log('登录成功')
									  uni.setStorageSync('token',ret.data.token)
									  uni.setStorageSync('userinfo',ret.data)
									setTimeout(()=>{
										uni.reLaunch({
											url:'/pages/my/index'
										})
									})
								  }
								 
							  })
						
						  },
						  fail(){
							  console.log('失败')
						  }
						});
						
					}
				})
			},

			sendSMS() {
				console.log('发送条令')
				API.common.sendSMS({
					mobile: this.phone
				}).then(res => {
					if (res.errno == '0') {
						var t = 60
						var timer = setInterval(() => {
							if (t == 0) {
								clearInterval(timer)
								this.disabled = false
								this.msg = '发送验证码'
							} else {
								t = t - 1
								this.msg = `${t}s后重新发送`
								this.disabled = true
							}
						}, 1000)
						uni.showToast({
							title: '发送成功',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style>
	.box-list {
		width: 702rpx;
		height: 169rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.box-list view {
		line-height: 85rpx;
	}

	.box-list view.title {
		font-size: 30rpx;
	}

	.box-list view button.sms-btn {
		width: 190rpx;
		line-height: 85rpx;
		text-align: center;
		color: #CEA46C;
		font-size: 28rpx;
		background: none;
		border: 0;
		padding: 0;
		border-radius: 0;
		text-align: right;
	}

	.box-list view button.sms-btn::after {
		background: none;
		border: 0;
		padding: 0;
	}

	.box-list view input {
		line-height: 85rpx;
		height: 85rpx;
		font-size: 26rpx;
	}

	.footer-box {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 3px 12px #EAEAEA;
		opacity: 1;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.footer-box view {
		background: #333333;
		color: #F6CB90;
		line-height: 80rpx;
		text-align: center;
		border-radius: 100rpx;
		font-size: 30rpx;
		margin-top: 15rpx;
	}

	.footer-box view:active {
		opacity: 0.7;
	}
</style>
